<template>
	<div class="boxall" style="padding: 0 0.2rem 0.4rem 0.15rem; height: 3.4rem">
		<div class="alltitle">访客/浏览 TOP8</div>
		<div class="allnav" id="vbRanking"></div>
		<div class="boxfoot"></div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				vbRankingDom: null,
				vbRankingOption: [],
				vbRankingV: [],
				vbRankingB: []
			};
		},
		methods: {
			async vbRankingData(isLoading = true) {
				if (isLoading) {
					this.vbRankingDom.showLoading({
						text: '加载中 · · ·',
						color: '#02a6b5',
						textColor: '#fff',
						maskColor: 'rgba(4, 6, 51)'
					});
				}

				const res1 = this.$db['wmzmall-goods-history, wmzmall-goods']
					.collection()
					.groupBy('goods')
					.groupField('count(*) as visit')
					.orderBy('visit desc')
					.limit(8)
					.get();

				const res2 = this.$db['wmzmall-goods-history, wmzmall-goods']
					.collection()
					.groupBy('goods')
					.groupField('sum(visit_cnt) as browse')
					.orderBy('browse desc')
					.limit(20)
					.get();

				let vbRankingDatas = {
					code: 0,
					datas: []
				};

				let browseObj = {};
				let visitSum = 0;
				let browseSum = 0;

				await Promise.all([res1, res2]).then(resData => {
					resData[0].result.data.forEach(x => {
						browseObj = resData[1].result.data.find(d => d.goods[0]._id == x.goods[0]
							._id) || {};
						vbRankingDatas.datas.push({
							name: x.goods[0].name,
							visit: x.visit,
							browse: browseObj.browse || 0
						});

						visitSum += x.visit;
						browseSum += browseObj.browse || 0;
					});
				}).catch(()=>{
					if (isLoading) {
						this.vbRankingDom.hideLoading();
					}
				})

				if (isLoading) {
					this.vbRankingDom.hideLoading();
				}

				if (vbRankingDatas.datas.length > 0) {
					vbRankingDatas.code = 200;
				}

				if (vbRankingDatas.code == 200) {
					this.vbRankingOption.baseOption.yAxis[0].data = [];
					this.vbRankingOption.baseOption.yAxis[1].data = [];
					this.vbRankingOption.baseOption.yAxis[2].data = [];
					vbRankingDatas.datas.forEach((x, i) => {
						this.vbRankingOption.baseOption.yAxis[0].data.push(x.name.substr(0, 10));
						this.vbRankingOption.baseOption.yAxis[1].data.push({
							value: x.name.substr(0, 6),
							textStyle: {
								align: 'center'
							}
						});
						this.vbRankingOption.baseOption.yAxis[2].data.push(x.name.substr(0, 10));
						this.vbRankingV[i] = parseInt((x.visit / visitSum) * 100);
						this.vbRankingB[i] = parseInt((x.browse / browseSum) * 100);
					});
				}
				this.vbRankingDom.setOption(this.vbRankingOption);
			},
			vbRankingCharts(callback) {
				this.vbRankingDom = this.$echarts.init(document.getElementById('vbRanking'));

				this.vbRankingOption = {
					baseOption: {
						timeline: {
							show: false
						},
						legend: {
							top: 0,
							left: 'center',
							itemWidth: 10,
							itemHeight: 10,
							icon: 'horizontal',
							textStyle: {
								color: 'rgba(255, 255, 255, 0.7)'
							},
							data: ['访客', '浏览']
						},
						grid: [{
								show: false,
								left: '2%',
								top: '10%',
								bottom: '0%',
								containLabel: true,
								width: '35%'
							},
							{
								show: false,
								left: '50%',
								top: '10%',
								bottom: '0%',
								width: '0%'
							},
							{
								show: false,
								right: '2%',
								top: '10%',
								bottom: '0%',
								containLabel: true,
								width: '35%'
							}
						],
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'shadow',
								label: {
									show: true
								}
							},
							formatter: ' {a1}\n {b1}: {c1}%   '
						},
						xAxis: [{
								type: 'value',
								inverse: true,
								axisLine: {
									show: false
								},
								axisTick: {
									show: false
								},
								position: 'bottom',
								axisLabel: {
									show: false,
									textStyle: {
										color: 'white'
									}
								},
								splitLine: {
									show: false
								}
							},
							{
								gridIndex: 1,
								show: false
							},
							{
								gridIndex: 2,
								axisLine: {
									show: false
								},
								axisTick: {
									show: false
								},
								position: 'bottom',
								axisLabel: {
									show: false,
									interval: 0,
									textStyle: {
										color: 'white'
									}
								},
								splitLine: {
									show: false
								}
							}
						],
						yAxis: [{
								type: 'category',
								inverse: true,
								axisLine: {
									show: false
								},
								axisTick: {
									show: false
								},
								axisLabel: {
									show: false
								},
								data: []
							},
							{
								gridIndex: 1,
								type: 'category',
								inverse: true,
								axisLine: {
									show: false
								},
								axisTick: {
									show: false
								},
								axisLabel: {
									show: true,
									textStyle: {
										color: 'rgba(255, 255, 255, 0.7)'
									}
								},
								data: []
							},
							{
								gridIndex: 2,
								type: 'category',
								inverse: true,
								axisLine: {
									show: false
								},
								axisTick: {
									show: false
								},
								axisLabel: {
									show: false
								},
								data: []
							}
						],
						series: []
					},
					options: [{
						series: [{
								type: 'pictorialBar',
								xAxisIndex: 0,
								yAxisIndex: 0,
								itemStyle: {
									normal: {
										color: 'rgba(0,0,0,0)'
									}
								},
								barWidth: 10,
								data: [100, 100, 100, 100, 100, 100, 100, 100],
								barGap: '-100%',
								barCategoryGap: 0,
								label: {
									normal: {
										show: true,
										formatter: series => {
											return this.vbRankingV[series.dataIndex] + '%';
										},
										position: 'insideTopLeft',
										textStyle: {
											color: 'rgba(255, 255, 255, 0.7)'
										},
										offset: [0, -10]
									}
								},
								z: -100,
								animationEasing: 'elasticOut'
							},
							{
								name: '访客',
								type: 'bar',
								xAxisIndex: 0,
								yAxisIndex: 0,
								barWidth: 10,
								itemStyle: {
									normal: {
										barBorderRadius: 5,
										color: '#00d4c7'
									}
								},
								data: this.vbRankingV
							},
							{
								type: 'pictorialBar',
								xAxisIndex: 2,
								yAxisIndex: 2,
								symbol: 'rect',
								itemStyle: {
									normal: {
										color: 'rgba(0,0,0,0)'
									}
								},
								barWidth: 5,
								symbolRepeat: true,
								symbolSize: 10,
								data: [100, 100, 100, 100, 100, 100, 100, 100],
								barGap: '-100%',
								barCategoryGap: 0,
								label: {
									normal: {
										show: true,
										formatter: series => {
											return this.vbRankingB[series.dataIndex] + '%';
										},
										position: 'insideTopRight',
										textStyle: {
											color: 'rgba(255, 255, 255, 0.7)'
										},
										offset: [0, -10]
									}
								},
								z: -100,
								animationEasing: 'elasticOut'
							},
							{
								name: '浏览',
								type: 'bar',
								xAxisIndex: 2,
								yAxisIndex: 2,
								barWidth: 10,
								itemStyle: {
									normal: {
										barBorderRadius: 5,
										color: '#0092f6'
									}
								},
								data: this.vbRankingB
							}
						]
					}]
				};

				window.addEventListener('resize', () => {
					this.vbRankingDom.resize();
				});

				if (typeof callback === 'function') {
					callback();
				}
			}
		},
		mounted() {
			this.vbRankingCharts(() => {
				this.vbRankingData();
			});
		},
		created() {
			uni.$on('biRefresh', () => {
				this.vbRankingData(false);
			});
		}
	};
</script>

<style></style>
